<template>
  <div class="total-chart">
    <TslChart ref="chartRef" width="100%" height="100%" :config="chartConfig" />
  </div>
</template>

<script setup lang="ts">
import type { HoldItem } from '@/indexDB/initHold'
import type { SunBurstItem } from '@/chart/sunBurst'
import { getOption } from '@/chart/sunBurst'
import { TslChart } from '@tslsmart/charts'
import { computed, ref, watchEffect } from 'vue'
import BuildTreeWorker from './buildTree?worker'
import { categoryList } from '@/indexDB/initCategory'

const props = defineProps<{
  list: HoldItem[]
  total: number
}>()

const chartRef = ref()

const treeList = ref<SunBurstItem[]>([])

const chartConfig = computed(() => {
  return getOption(treeList.value, props.total)
})
const buildTree = new BuildTreeWorker()
buildTree.addEventListener('message', (e) => {
  treeList.value = e.data
  chartRef.value?.refresh()
})

watchEffect(() => {
  buildTree.postMessage(
    JSON.stringify({
      categoryList: categoryList.value,
      holdList: props.list
    })
  )
})
</script>

<style lang="scss">
.total-chart {
  height: 100%;
}
</style>
